<template>
  <div class="alone-outBox f14">
    <div class="alone-topBox mb16">
      <div class="flex flex-warp flex_bt" style="justify-content: flex-end">
        <div class="flex flex-warp" style="align-items: center">
          <div class="mb20">
            <el-badge is-dot class="item" style="margin-right: 10px;" v-if="currentData.length > 0">
              <el-button type="primary" @click="checkCurrentTable()"
                >当前任务</el-button
              >
            </el-badge>
            <el-button v-else type="primary" @click="checkCurrentTable()"
              >当前任务</el-button
            >
            <el-button type="primary" @click="SearchListBt">合并</el-button>
            <el-button type="danger" @click="SearchListBt">删除</el-button>
          </div>
        </div>
        <div></div>
      </div>
    </div>

    <div class="tableBox">
      <!-- 表格 -->
      <el-table
        :data="DataTable"
        style="width: 100%"
        max-height="620"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          prop="channelSessionId"
          label="场次ID"
          min-width="150"
          align="left"
        />
        <el-table-column
          prop="startTime"
          label="直播开始时间"
          align="left"
          min-width="200"
        />

        <el-table-column
          prop="recordFileType"
          label="视频类型"
          min-width="100"
          align="left"
        >
          <template slot-scope="scope">
            <span
              :class="[
                'recordFileType',
                scope.row.recordFileType == '裁剪' ||
                scope.row.recordFileType == '手动合并'
                  ? 'typeColor1'
                  : 'typeColor2',
              ]"
              >{{ scope.row.recordFileType }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="fileName"
          label="视频名称"
          min-width="350"
          align="left"
        />
        <el-table-column
          prop="duration"
          label="视频时长"
          min-width="100"
          align="left"
        />
        <el-table-column
          prop="daysLeft"
          label="暂存剩余天数"
          min-width="120"
          align="left"
        />
        <el-table-column label="操作" align="center" width="170" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" class="mr10" @click="cutShip(scope.row)"
              >裁剪</el-button
            >
            <el-button type="text" @click="preview(scope.row)">预览</el-button>
            <el-button class="mr10" type="text" @click="deletePaper(scope.row)"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 预览弹窗 -->
    <preview-dialog ref="previewDialog"></preview-dialog>
    <!-- 裁切弹窗 -->
    <cutShip-dialog
      ref="cutShipDialog"
      :getlistData="getlistData"
    ></cutShip-dialog>
    <!-- 当前任务 -->
    <current-dialog ref="currentDia" :currentData="currentData2"></current-dialog>
  </div>
</template>
  <script>
import Pagination from "@/components/Pagination/index.vue";
import previewDialog from "../components/previewDialog/index.vue";
import cutShipDialog from "../components/cutShipDialog/index.vue";
import currentDialog from "../components/currentDialog/index.vue";
import api from "@/api/index.js";
import { getMint, insertStr } from "@/utils/commin.js";
export default {
  components: {
    Pagination,
    previewDialog,
    cutShipDialog,
    currentDialog
  },
  data() {
    return {
      searchObj: {
        limit: 10,
        page: 1,
      },
      total: 0,
      DataTable: [],
      getlistData: {},
      currentData: [], //当前任务(用于请求存放)
      currentData2: [], //当前任务(用于弹窗赋值)
    };
  },
  mounted() {
    this.SearchList();
    this.getcurrentData();
  },
  watch:{
    currentData(val){
      this.SearchList()
    }
  },
  methods: {
    checkCurrentTable(){
    //  let name=this.currentData
     this.currentData2=this.currentData
     this.$refs.currentDia.dialogTableVisible=true
    },
    //定时查询当前任务
    getcurrentData() {
      let form={
        channelId:'3744789'
      }
      api.video.clipMergeTaskList(form).then((res) => {
        if (res.data.length > 0) {
          this.currentData = res.data;
          setTimeout(() => {
            this.getcurrentData();
          }, 5000);
        }
      });
    },
    // 查询
    SearchListBt() {
      this.searchObj.limit = 10;
      this.searchObj.page = 1;
      this.SearchList();
    },
    SearchList() {
      let form = {
        // channelId:'3744789',
        mid:'33901'
      };
      api.video.getOfficekList(form).then((res) => {
        this.DataTable = res.data;
        this.DataTable.forEach((item) => {
          switch (item.recordFileType) {
            case "complete":
              item.recordFileType = "完整回放";
              break;
            case "part":
              item.recordFileType = "自动录制_片段";
              break;
            case "merge":
              item.recordFileType = "手动合并";
              break;
            case "clip":
              item.recordFileType = "裁剪";
              break;
            default:
              break;
          }
          item.duration = getMint(item.duration);
          item.startTime = insertStr(item.startTime, 4, "-");
          item.startTime = insertStr(item.startTime, 7, "-");
          item.startTime = insertStr(item.startTime, 10, " ");
          item.startTime = insertStr(item.startTime, 13, ":");
          item.startTime = insertStr(item.startTime, 16, ":");
        });
        //   this.total = res.total
      });
    },
    // 分页
    paginations(val) {
      this.searchObj.limit = val.limit;
      this.searchObj.page = val.page;
      this.SearchList();
    },
    releaseInformation() {
      this.$router.push(`/content/solutionscheme/solution/addoredit`);
    },
    preview(val) {
      this.$refs.previewDialog.dialogPreview = true;
    },
    cutShip(val) {
      // console.log(val);

      this.$refs.cutShipDialog.dialogcutShip = true;
      // this.$refs.cutShipDialog.deltitle=val.fileName
      this.getlistData = val;
    },
  },
};
</script>
  <style scoped>
.topButton {
  position: absolute;
  right: 20px;
  top: 16px;
}
.flex_bt {
  justify-content: space-between;
}
.icon_right {
  font-weight: 600;
  color: #0c7ff2;
  cursor: pointer;
  font-size: 18px;
}
.recordFileType {
  height: 20px;
  line-height: 19px;
  padding: 0 8px;
}
.typeColor1 {
  border-color: rgba(48, 165, 40, 0.1) !important;
  color: #30a528 !important;
  background: #30a5281a !important;
}
.typeColor2 {
  border-color: rgba(255, 182, 0, 0.1) !important;
  color: #ffb600 !important;
  background: rgba(255, 182, 0, 0.1) !important;
}
</style>
  